import React, { useState } from 'react';
import styles from './Rate.less';

export default function (props:any) {

  const { canUse = false, small = false } = props;

  let nums = [1, 2, 3, 4, 5];
  const [star, setStar] = useState(props.num || 5);

  const handleChangeStar =( num:any) => {
    if (!canUse) return;
    setStar(num);
    props.onChange && props.onChange(num);
  }

  return <div className={`${styles.rate} ${small ? styles.small : ''}`}>
    {nums.map((item, index) => (
      <span
        key={index}
        className={index < star ? styles.active : ''}
        onClick={()=>{handleChangeStar(item)}}
      >{item}星</span>
    ))}
  </div>
}